<!-- 
办理业务
-->
<template >
	<div class="wx-content">
		<div class="wx-login">
			<div class="wx-login_shadow">
				<div class="content">

					<!-- 输入区 -->
					<van-form @submit="onSubmit">
						<div class="text1">商店名称</div>
						<van-field v-model="name" label="" ref="nameInput" placeholder="请输入商店名称" />
						<div class="text1">负责人</div>
						<van-field v-model="manager" label="" ref="managerInput" placeholder="请输入负责人" />
						<div class="text1">手机号码<span></span> </div>
						<van-field v-model="mobile" label="" ref="mobileInput" placeholder="请输入手机号码" />
						<div class="text1">地址</div>
						<van-field v-model="addr" label="" ref="addrInput" placeholder="请输入地址" />
						<!-- <div class="text1">验证码</div>
					<van-field v-model="code" center clearable ref="codeInput" placeholder="请输入短信验证码">
						<template #button>
							<van-button size="small" :disabled="time?true:false" plain color="#d3a272" type="primary" @click="handleGetcode">
								<span v-if="!time">发送验证码</span>
								<span v-else>
									<van-count-down :time="time" format="ss" @finish="checkTime">
										<template #default="timeData">

											<span class="time">重新获取({{ timeData.seconds }})</span>
										</template>
									</van-count-down>
								</span>
							</van-button>
						</template>
					</van-field> -->
					</van-form>

				</div>
				<!-- end 输入区 -->
			</div>
			<van-button class="van-button_login" @click="onSubmit">
				立即申请入驻</van-button>
		</div>

	</div>
</template>
<script>
import utils from '@/assets/js/utils';
import qs from 'qs';
import Vue from 'vue';

export default {
	data() {
		return {
			name: '',
			manager: '',
			addr: '',
			mobile: '',
			code: '',
			time: 0,
			role: localStorage.getItem('role') || 'member', //控制商家或用户登录的变量
			wxUserInfo: {}, //微信用户信息
			hasAgree: false,
			show: false,
			agreement: '',
		};
	},
	mounted() {
		this.hasAgree = localStorage.getItem('hasAgree') == '1' ? true : false;
	},
	methods: {
		get_member() {
			var params = {};
			this.$myApi.get_member(params).then((res) => {
				if (res.code == 0) {
					this.$store.dispatch('SET_USERINFO', res.result);
				} else {
				}
			});
		},

		/**
		 * 验证码倒计时结束事件
		 */
		checkTime(e) {
			this.time = 0;
		},
		/**
		 * 切换登录
		 */
		handleLoginChange(val) {
			(this.mobile = ''), (this.idcard = ''), (this.code = '');
			this.role == val;
		},
		/**
		 * 提交登录
		 */
		onSubmit() {
			if (!this.checkLoginFrom(!0)) {
				console.log(this.checkLoginFrom(!0));
				return;
			}
			let params;
			// console.log(wxUserInfo)
			params = {
				addr: this.addr,
				manager: this.manager,
				mobile: this.mobile,
				name: this.name,
				// openid: this.$store.state.openid,
			};
			this.$myApi.vendorApply_centre(params).then((res) => {
				if (res.code == 0) {
					this.$notify({ type: 'success', message: '操作成功' });
					this.$router.go(-1);
				}
			});
		},

		/**
		 * 发送验证码
		 */
		handleGetcode() {
			if (!this.checkLoginFrom(!1)) {
				return;
			}
			let params = {
				mobile: this.mobile,
				flag: true,
			};
			if (this.role == 'member') {
				params = {
					idcard: this.idcard,
					mobile: this.mobile,
					flag: true,
				};
				this.$myApi.captcha_book(params).then((res) => {
					if (res.code == 0) {
						this.time = 60000;
						this.$toast('获取成功，请查收');
					}
				});
			} else if (this.role == 'merchant') {
				params = {
					mobile: this.mobile,
				};
				axios
					.post(api.login.merchantCaptcha, qs.stringify(params))
					.then((res) => {
						this.time = 60000;
						this.$toast('获取成功，请查收');
					});
			}
		},
		/**
		 * 检查表单
		 */
		checkLoginFrom(type) {
			let result = !0;
			if (this.role == 'member') {
				// if (!this.idcard) {
				// 	this.$toast('请先填写身份证号');
				// 	this.$refs.idcardInput.focus();
				// 	return (result = !1);
				// }
				// else if (!utils.checkIdCard(this.idcard)) {
				//   this.$toast('请填写正确的身份证号');
				//   this.$refs.idcardInput.focus()
				//   return result = !1
				// }
			}

			if (!this.name) {
				this.$toast('请先填写商户名称');
				this.$refs.nameInput.focus();
				return (result = !1);
			}
			if (!this.manager) {
				this.$toast('请先填写负责人');
				this.$refs.managerInput.focus();
				return (result = !1);
			}
			if (!this.mobile) {
				this.$toast('请先填写手机号');
				this.$refs.mobileInput.focus();
				return (result = !1);
			} else if (!utils.checkMobile(this.mobile)) {
				this.$toast('请填写正确的手机号');
				this.$refs.mobileInput.focus();
				return (result = !1);
			}
			if (!this.addr) {
				this.$toast('请先填写地址');
				this.$refs.addrInput.focus();
				return (result = !1);
			}

			if (!type) return result;
			// if (!this.code) {
			// 	this.$toast('请填写验证码');
			// 	this.$refs.codeInput.focus();
			// 	return (result = !1);
			// }
			return (result = !0);
		},
	},
};
</script>
<style lang="less" scoped>
@MainColor: #af8f75;
@DeepGray: #999;
@LightGray: #a7a7a7;
@White: #fff;
@Money: #a71d27;
@Red: #f22005;
@Background: #f8f8f8;
@Black: #333;
@BorderColor: #f5f5f5;
.wx-content {
	// display: flex;
	// align-items: center;
	// height: 100vh;
	width: 100vw;
	overflow: hidden;
	background-size: 100% auto;

	.wx-login {
		position: relative;
		margin: auto;
		width: 100%;
		.wx-login_shadow {
			position: relative;
			z-index: 100;
			padding: 32px 16px;
			width: 100%;
			height: 12rem;
			background: #fff url('../../assets/images/shrz.png') top center
				no-repeat;
			background-size: 100% auto;
			.content {
				position: absolute;
				bottom: 0.5rem;
				width: calc(100% - 32px);
				border-radius: 20px;
				overflow: hidden;
				padding: 0.2rem 0;
				background: #fff;
			}
			.text1 {
				font-size: 0.3rem;
				color: #333333;
				padding: 10px 16px;
			}
			.time {
				color: #d3a272;
			}

			.van-field__button {
				.van-button--primary {
					height: 24px;
					border: 0;
				}
			}
		}
		.van-button_login {
			display: block;
			width: 6.54rem;
			height: 0.92rem;
			margin: 0.2rem auto;
			border-radius: 20px;
			font-size: 0.32rem;
			font-weight: bold;
			color: #333333;
			background: #ffce17;
		}
	}

	//wx-login
}
</style>
<style lang="less" scoped>
@MainColor: #af8f75;
@DeepGray: #999;
@LightGray: #a7a7a7;
@White: #fff;
@Money: #a71d27;
@Red: #f22005;
@Background: #f8f8f8;
@Black: #333;
@BorderColor: #f5f5f5;
/deep/.van-field__control {
	font-size: 0.3rem;
	// font-weight: bold;
	color: #000000;
	background: #fff;
}
/deep/.van-hairline--top-bottom::after {
	border-width: 0;
}

/deep/.van-tabs__line {
	background-color: @MainColor;
	height: 2px;
}

/deep/ .van-tab--active {
	color: @MainColor;
}

/deep/.van-cell-group {
}
</style>